<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title th:text="${text}">Heron</title>
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <meta name="msapplication-TileColor" content="#206bc4"/>
    <meta name="theme-color" content="#206bc4"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="mobile-web-app-capable" content="yes"/>
    <meta name="HandheldFriendly" content="True"/>
    <meta name="MobileOptimized" content="320"/>
    <meta name="robots" content="noindex,nofollow,noarchive"/>
    <!--    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>-->
    <!--    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>-->
    <!-- CSS files -->
    <link href="/dist/css/tabler.min.css" rel="stylesheet"/>
    <link href="/dist/css/demo.min.css" rel="stylesheet"/>
    <!--    <link href="https://cdn.staticfile.org/bootstrap-table/1.1.4/bootstrap-table.min.css" rel="stylesheet">-->
    <link href="/dist/css/bootstrap-table.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.6.0/css/all.min.css" rel="stylesheet">
    <link crossorigin="anonymous" integrity="sha384-GfS9Y0ZPEvQKO7UhzAiYGSuSCMuBmmj4EAnIV5f+lPiW3bV5/O85wugohIReUmKM"
          href="https://lib.baomitu.com/blueimp-file-upload/10.31.0/css/jquery.fileupload.min.css" rel="stylesheet">
    <link crossorigin="anonymous" integrity="sha384-vGVVwOgi5RT4K7OJ21OxiR8NchnF9caAVAFhXgNVg3X21ECIwJV7nXRP8Ty9kiQi"
          href="https://lib.baomitu.com/blueimp-file-upload/10.31.0/css/jquery.fileupload-ui.min.css" rel="stylesheet">
    <style>
        body {
            display: none;
        }
    </style>
</head>
<body class="antialiased">
<div class="page">
    <header class="navbar navbar-expand-md navbar-light">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a href="/" class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
                <img src="./static/logo.svg" th:src="@{/static/logo.svg}" alt="Tabler"
                     class="navbar-brand-image">
            </a>
            <div class="navbar-nav flex-row order-md-last">
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
                        <div th:switch="${session.currentUser.avatar == '' or session.currentUser.avatar == null}">
                                                                    <span class="avatar avatar-md" th:case="true"><svg
                                                                            xmlns="http://www.w3.org/2000/svg"
                                                                            class="icon icon-md" width="24"
                                                                            height="24" viewBox="0 0 24 24"
                                                                            stroke-width="2" stroke="currentColor"
                                                                            fill="none" stroke-linecap="round"
                                                                            stroke-linejoin="round"><path
                                                                            stroke="none" d="M0 0h24v24H0z"></path><circle
                                                                            cx="12" cy="7"
                                                                            r="4"></circle><path
                                                                            d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2"></path></svg></span>
                            <span class="avatar avatar-md" th:case="false"
                                  th:style="'background-image:url('+${session.currentUser.avatar}+')'"></span>
                        </div>
                        <div class="d-none d-xl-block pl-2">
                            <div th:text="${session.currentUser.account}">Paweł Kuna</div>
                            <div class="mt-1 small text-muted" th:text="${session.currentUser.eMail}">UI
                                Designer
                            </div>
                        </div>
                    </a>
                </div>
                <div class="nav-item" style="margin-left: 20px;margin-right: 20px">
                    <a href="/logout">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24"
                             viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                             stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z"></path>
                            <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
                            <path d="M7 12h14l-3 -3m0 6l3 -3"></path>
                        </svg>
                        退出
                    </a>
                </div>
            </div>
        </div>
    </header>
    <div class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
            <div class="navbar navbar-light">
                <div class="container-fluid">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="/index">
                                        <span class="nav-link-icon d-md-none d-lg-inline-block">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 class="icon" width="24" height="24"
                                                 viewBox="0 0 24 24" stroke-width="2"
                                                 stroke="currentColor" fill="none"
                                                 stroke-linecap="round"
                                                 stroke-linejoin="round">
                                                <path
                                                        stroke="none" d="M0 0h24v24H0z"/>
                                                <polyline points="5 12 3 12 12 3 21 12 19 12"/>
                                                <path
                                                        d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/>
                                                <path
                                                        d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/>
                                            </svg>
                                        </span>
                                <span class="nav-link-title">
                                            首页
                                        </span>
                            </a>
                        </li>
                        <li class="nav-item" th:each="menu:${menus}"
                            th:classappend="${menu.child == null} ? '' : dropdown"
                            th:switch="${menu.child != null}">
                            <a th:case="true" class="nav-link dropdown-toggle" data-toggle="dropdown"
                               role="button"
                               aria-expanded="false">
                                <span class="nav-link-icon d-md-none d-lg-inline-block"></span>
                                <span class="nav-link-title" th:text="${menu.menuName}"></span>
                            </a>
                            <a th:case="false" class="nav-link"
                               th:href="@{{url}(url=${menu.url}, menuName=${menu.menuName})}">
                                <span class="nav-link-icon d-md-none d-lg-inline-block"></span>
                                <span class="nav-link-title" th:text="${menu.menuName}"></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2"
                                th:if="${menu.child != null}">
                                <li th:each="item:${menu.child}">
                                    <a class="dropdown-item"
                                       th:href="@{{url}(url=${item.url}, menuName=${item.menuName})}"
                                       th:text="${item.menuName}"></a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container-fluid">
            <!-- Page title -->
            <div class="page-header">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <h2 class="page-title" th:text="${text}"></h2>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="table-responsive" style="padding: 10px">
                    <div id="toolbar">
                        <shiro:hasPermission name="sys:resource:upload">
                            <input type="file" id="file" name="file" data-url="/resource/uploadResource"
                                   style="display: none" multiple>
                            <button type="button" class="btn btn-primary upload">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24"
                                     viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                     stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z"></path>
                                    <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"></path>
                                    <polyline points="9 15 12 12 15 15"></polyline>
                                    <line x1="12" y1="12" x2="12" y2="21"></line>
                                </svg>
                                上传
                            </button>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="sys:resource:del">
                            <button type="button" class="btn btn-primary res_del">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24"
                                     viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                     stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z"></path>
                                    <line x1="4" y1="7" x2="20" y2="7"></line>
                                    <line x1="10" y1="11" x2="10" y2="17"></line>
                                    <line x1="14" y1="11" x2="14" y2="17"></line>
                                    <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
                                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                                </svg>
                                删除
                            </button>
                        </shiro:hasPermission>
                    </div>
                    <table id="resource_table" data-toolbar="#toolbar" class="table table-striped table-bordered"
                           data-checkbox-header="false" data-click-to-select="true"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Libs JS -->
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
<script src="/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/dist/js/bootstrap-table.min.js"></script>
<script src="/dist/js/bootstrap-table-zh-CN.min.js"></script>
<script src="https://cdn.staticfile.org/layer/3.1.1/layer.min.js"></script>
<script src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-HkHKYfCol0Gg2dkUiNVrKw/EGcqk1X+L3Jj6jRzcLhRGadAPwkHv89Rq3zlW+caC"
        src="https://lib.baomitu.com/blueimp-file-upload/10.31.0/js/vendor/jquery.ui.widget.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-C8E+OigLmgvqsVaZx5O+y3CFThdNepYBLWUoFk9BCsd+t3nhNyXQEkAyb55Ty/jY"
        src="https://lib.baomitu.com/blueimp-file-upload/10.31.0/js/jquery.iframe-transport.min.js"></script>
<script src="https://cdn.staticfile.org/blueimp-file-upload/10.0.0/js/jquery.fileupload.min.js"></script>
<!-- Tabler Core -->
<script src="/dist/js/tabler.min.js"></script>
<script src="/dist/js/base.js"></script>
<script type="text/javascript">
    document.body.style.display = "block";
    var clipboard = new ClipboardJS('.copy_link');
    var $table = $('#resource_table');
    $(document).ready(function () {
        $table.bootstrapTable({
            url: '/resource/resourcePageInfo',
            pagination: true,
            sortable: false,
            locale: 'zh-CN',
            virtualScroll: true,
            totalField: 'total',
            dataField: 'list',
            sidePagination: 'server',
            pageSize: 5,
            pageList: [5, 10, 20, 50],
            search: false,
            cache: true,
            idField: 'id',
            showRefresh: false,
            columns: [{
                checkbox: true
            }, {
                field: 'resourceName',
                title: '名称'
            }, {
                field: 'resourceType',
                title: '类型'
            }, {
                field: 'createTime',
                title: '创建时间'
            }, {
                field: 'bucketName',
                title: '存储桶名称'
            }, {
                field: 'resourcePath',
                title: '操作',
                formatter: function accountFormatter(value, row) {
                    var html = '';
                    html += '<a type="button" href="' + value + '" target="_blank" title="下载"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"></path><path d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4"></path><line x1="12" y1="13" x2="12" y2="22"></line><polyline points="9 19 12 22 15 19"></polyline></svg></a>';
                    html += '&nbsp;&nbsp;&nbsp;&nbsp;'
                    // html += '<input class="res_link_'+row.id+'" value="' + value + '" hidden/>'
                    html += '<a href="javascript:void(0)"  class="copy_link" title="复制链接" data-clipboard-text="' + value + '"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a>';
                    return html;
                }
            }]
        });
    });
    clipboard.on('success', function (e) {
        layer.msg('复制链接成功！');
        e.clearSelection();
    });
    clipboard.on('error', function (e) {
        layer.msg('复制链接失败！');
    });

    $('.upload').click(function () {
        $('#file').click();
    });
    var index;
    $('#file').fileupload({
        dataType: 'json',
        progressall: function (e, data) {
            // var progress = parseInt(data.loaded / data.total * 100, 10);
            // 显示上传进度条
            index = layer.load(2, {});
        },
        done: function (e, data) {
            var result = data._response.result;
            if (1 == result.errno) {
                layer.close(index);
                layer.msg(result.message);
                return;
            } else {
                layer.close(index);
                layer.msg('上传成功！');
                $table.bootstrapTable('refresh');
            }
        }
    });

    var ids = [];
    $('.res_del').click(function () {
        var rows = $table.bootstrapTable('getSelections');
        if (rows.length == 0) {
            layer.msg('请选择一条记录！');
            return;
        }
        index = layer.load(2, {});
        $(rows).each(function () {
            ids.push(this.id);
        });
        delRes(ids);
        ids = [];
    });


    function delRes(arr) {
        $.ajax({
            type: 'POST',
            url: '/resource/batchDelResources',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(arr),
            success: function (resp) {
                if (1 == resp.code) {
                    layer.close(index);
                    layer.msg('删除成功！');
                    $table.bootstrapTable('refresh');
                } else {
                    layer.close(index);
                    layer.msg('删除失败！');
                }
            },
            error: function (res) {
                layer.close(index);
                layer.msg('删除失败！');
            }
        });
    }
</script>
</body>
</html>
